<script setup lang="ts">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import { useColumns } from "./columns";
import { isAllEmpty } from "@pureadmin/utils";
import { ElMessage } from "element-plus";
defineOptions({
  name: "UserGroupData"
});
const props = defineProps({
  userId: {
    type: Number,
    default: 0
  }
});

const {
  loading,
  columns,
  dataList,
  loadingConfig,
  adaptiveConfig,
  totalMoney,
  mymoney,
  teammoney,
  loadData,
  onKeywordChange
} = useColumns();

const searchColumns: PlusColumn[] = [
  {
    label: "用户账号",
    labelWidth: 120,
    width: 600,
    prop: "account",
    valueType: "input"
  },
  {
    label: "选择时间范围",
    labelWidth: 120,
    width: 600,
    prop: "dateRange",
    valueType: "date-picker",
    tooltip: "请选择时间段",
    fieldProps: {
      type: "daterange",
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD"
    }
  },

  {
    label: "团队业绩",
    labelWidth: 88,
    width: 200,
    prop: "totalMoney"
  },
  {
    label: "个人业绩",
    labelWidth: 88,
    width: 200,
    prop: "mymoney"
  }
];
const handleChangeSearch = (value: any, target: any) => {
  if (target.prop == "account") {
    return;
  }
  const { dateRange, account } = value;
  if (isAllEmpty(account)) {
    ElMessage.error("请输入用户账号");
    return;
  }
  if (!dateRange || dateRange.length == 0) {
    onKeywordChange(undefined, undefined, account);
    return;
  }
  onKeywordChange(dateRange[0], dateRange[1], account);
};
const handleSearch = (value: any) => {
  const { dateRange, account } = value;
  if (isAllEmpty(account)) {
    ElMessage.error("请输入用户账号");
    return;
  }
  if (!dateRange || dateRange.length == 0) {
    onKeywordChange(undefined, undefined, account);
    return;
  }
  onKeywordChange(dateRange[0], dateRange[1], account);
};
const handleReset = value => {
  console.log("reset", value);
  dataList.value = [];
};
</script>

<template>
  <div class="flex flex-col">
    <PlusSearch
      class="mt-5"
      :columns="searchColumns"
      :hasUnfold="false"
      :hasFooter="true"
      :colProps="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }"
      @change="handleChangeSearch"
      @search="handleSearch"
      @reset="handleReset"
    >
      <template #plus-field-totalMoney>
        <span>{{ teammoney }}</span>
      </template>
      <template #plus-field-mymoney>
        <span>{{ mymoney }}</span>
      </template>
    </PlusSearch>
    <pure-table
      ref="tableRef"
      showOverflowTooltip
      border
      row-key="id"
      class="mt-2"
      :height="400"
      alignWhole="center"
      :loading="loading"
      :loading-config="loadingConfig"
      :data="dataList"
      :columns="columns"
    />
  </div>
</template>

<style scoped></style>
